<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>demo-兄弟间组件通信</title>

		<style>
			* {
				box-sizing: border-box;
				font-size: 18px;
				padding: 0;
				margin: 0;
			}

			.container {
				color: white;
				max-width: 500px;
				min-width: 200px;
				padding: 10px 15px 10px 15px;
				margin: 0 auto;

				border-radius: 15px;
				box-shadow: 0px 2px 10px rgba(0, 0, 0, .5);
				background: linear-gradient(45deg, rgb(234, 179, 179), rgb(186, 59, 24));

			}

			.input-group {
				margin: 20px auto;
			}

			.input-group .input-control {
				width: 100%;
				display: inline-block;


				padding: 10px;
				border-radius: 10px;
				box-shadow: none;
				border: .5px solid #333333;
			}

			.container label {
				color: white;
				display: inline-block;
				font-weight: 500;
				padding-bottom: 5px;
				font-size: 20px;

			}
		</style>

	</head>

	<body>

		<div id="app">
			
			<!-- 兄弟组件之间的通信 -->
			<div class="container">
				<you></you>
				<frank></frank>
			</div>
			
		</div>


		<template id="you-tpl">
			<div class="input-group">
				<label for="you">你说: </label>
				<input id="you" @keyup="onchange" v-model="something" 
				class="input-control">
			</div>
		</template>


		<template id="me-tpl">
			<div class="input-group">
				<label for="frank">frank听:</label>
				<input id="frank" v-model="something" 
				class="input-control">
			</div>
		</template>


		<script src="js/vue.js"></script>
		<script src="js/main.js"></script>

	</body>

</html>
